layui.use(['table', 'form', 'jquery', 'laypage'], function () {
    var form = layui.form,
        table = layui.table,
        page = layui.laypage,
        $ = layui.jquery;

    //报修记录
    var repair_data = table.render({
        elem: "#repairList",
        url: '/reListController/list',
        cellMinWidth: 95,
        limit: 10,
        limits: [5, 10, 15, 20, 25],
        page: true,
        loading: true,
        size: 'lg',
        response: {
            statusName: 'code'
            , statusCode: 200
            , msgName: 'msg'
            , countName: 'count'
            , dataName: 'data'
        },
        id: 'repairList',
        cols: [[
            {type: "checkbox", fixed: "left", width: 50},
            {field: 'id', title: 'ID', hide: true},
            {field: 'userId', title: '报修人编号', align: 'center', width: 100},
            {field: 'userName', title: '姓名', align: 'center', width: 100},
            {field: 'jobId', title: '工号', align: 'center', width: 100},
            {field: 'userTel', title: '电话', align: 'center', width: 150},
            {
                field: 'serviceId', title: '是否指派', align: 'center', width: 200, templet: function (d) {
                    return d.serviceId != null ? '<span style="color: #00FF00">已指派</span>' : '<span style="color: red">还未指派维修人员</span>'
                }
            },
            {field: 'location', title: '报修位置', align: 'center'},
            {
                field: 'emergency', title: '紧急程度', align: 'center', width: 100, templet: function (d) {
                    if (d.emergency === 1) {
                        return '<span style="color: red;font-weight: 600">非常重要</span>'
                    } else if (d.emergency === 2) {
                        return '<span style="color: brown;font-weight: 600">重要</span>'
                    } else {
                        return '<span style="color: orange;font-weight: 600">普通</span>'
                    }
                }
            },
            {field: 'detailInfo', title: '问题描述', align: 'center'},
            {field: 'startTime', title: '报修时间', align: 'center'},
            {field: 'responseTime', title: '响应时长', align: 'center'},
            {
                field: 'state', title: '是否解决', align: 'center', templet: function (d) {
                    if (d.state === 0) {
                        return '<span style="color: red">待处理</span>'
                    } else if (d.state === 1) {
                        return '<span style="color: yellow">处理中</span>'
                    } else {
                        return '<span style="color: green">已处理</span>'
                    }
                }
            },
            {field: 'resolveTime', title: '解决时长', align: 'center'},
            {
                field: 'photo', title: '图片描述', align: 'center', width: 150, templet: function (d) {
                    return '<a href="' + d.photo + '" target="_blank"><img src="' + d.photo + '" style="width: 60px;height: 60px"/></a>'
                }
            },
            {title: '操作', width: 250, templet: '#repairListBar', fixed: "right", align: "center"}
        ]],
        /*done: function(res, curr, count){//渲染成功后回调

        }*/
    });

    /**
     * 监听表格工具按钮事件
     */
   table.on('tool(repairList)', function (obj) {
       var data = obj.data,
           layEvent = obj.event;
       if (layEvent === 'assign'){
           if (data.serviceId != null){
               layer.msg("已指派!")
           }else {
               assignServiceman(data);
           }
       }else if (layEvent === 'detail'){
           detail(data)
       }
   })

   /**
    * 指派维修人
    */
    function assignServiceman(obj) {
        var index = layer.open({
            title: "指派维修人",
            type: 2,
            area: ['30%', '60%'],
            content: '../serviceman/assignServiceman.html',
            success: function (layero, index) {//参数绑定
                // 获取子页面的iframe,DOM
                var body = layui.layer.getChildFrame('body', index);
                // 向子页面传参
                if (obj) {
                    body.find('.rsId').val(obj.id);
                    form.render();
                }
                setTimeout(function () {
                    layui.layer.tips('点击此处返回', '.layui-layer-setwin .layui-layer-close', {
                        tips: 3
                    });
                }, 500)
            }

        })
        /*layui.layer.full(index);*/
        //改变窗口大小时，重置弹窗的宽高
        $(window).on("resize", function () {
            /* layui.layer.full(index);*/
            layer.area = ['30%', '35%']
        });
    }

    function detail(data){
        layui.layer.open({
            title: "查看报修单",
            type: 2,
            content: "../admin/detail_admin_repair.html",//弹出层页面
            area: ['100%', '100%'],
            success: function (layero, index) {
                var body = layui.layer.getChildFrame('body', index);
                if (data) {
                    // 取到弹出层里的元素，并把编辑的内容放进去
                    body.find(".id").val(data.id);  //将选中的数据的id传到编辑页面的隐藏域，便于根据ID修改数据
                    body.find(".userName").val(data.userName);  //姓名
                    body.find(".jobId").val(data.jobId);//工号
                    body.find(".userTel").val(data.userTel);  //联系电话
                    body.find(".location").val(data.location);  //报修地址
                    body.find(".emergency input[value="+data.emergency+"]").prop("checked","checked");  //紧急程度，单选按钮
                    body.find(".detailInfo").val(data.detailInfo);  //问题描述
                    // 记得重新渲染表单
                    form.render();
                }
                setTimeout(function(){
                    layui.layer.tips('点击此处返回', '.layui-layer-setwin .layui-layer-close', {
                        tips: 3
                    });
                },500)
            }
        })
        //改变窗口大小时，重置弹窗的宽高，防止超出可视区域（如F12调出debug的操作）
        $(window).on("resize",function(){
            layui.layer.full(window.sessionStorage.getItem("index"));
        })
    }


});
